<script>
/* 去除Chrome字体最小12px的最终解决方案
 * 带边框的按钮：
 * 常用的按钮样式，默认带边框
 * 默认使用圆角，固定圆角为0.2vw
 * 预设颜色：Blue（默认），Red，Green，Yellow，Orange，Black，Pink
 * 没有高度，默认两倍字体高度
 * 默认字体大小为0.65vw，在1920宽度下，大约等于12px
 * 在SessionStorage置入一个名为OpenDebug的key，值为true，即可开启全局Debug
 */

export default {
  // 控制组件用的参数
  props: {
    xText: null, // 按钮内显示的文字
    xColor: null, // 鼠标悬浮时文字和边的颜色，支持16进制，不支持透明
    xSize: null, // 按钮内文字大小
    xDisable: null, // 是否禁用按钮，false以外的值一律为启用
    xRadius: null, // 是否使用圆角，false以外的值一律为启用
    xExcess: null, // 是否启用按钮的过度效果，false以外的值一律为启用
    xMsg: null, // 这是个用户自定义参数，触发按钮点击事件时会返回此参数
    xDeBug: null, // 调试模式，true以外的值一律为禁用
    xDeBugId: null // 调试模式ID，可有可无
  },

  // 主要变量
  data: () => ({
    TEXT: "", // 按钮内显示的文字
    COLORA: "BaseE318AEBFD7BF207A", // 鼠标悬浮时文字和边的颜色
    COLORS: ["Blue", "Red", "Green", "Yellow", "Orange", "Black", "Pink"], // 预设名称
    COLORL: "", // 用来存储用户定制的颜色
    SIZE: 0, // 默认的按钮文字大小
    WIDTH: 0, // 按钮的宽度，由JS计算获得
    EXCESS: "ExcessCloseE318AEBFD7BF207A", // 控制按钮的过度动画
    TERM: new RegExp(/^#([0-9a-fA-F]{6})$/) // 颜色匹配正则
  }),

  // 渲染前执行
  created() {
    this.TEXT = this.xText || "默认文字"; // 获取文字
    this.SIZE = Number(this.xSize) || 0.65; // 获取文字大小，默认0.65vw
  },

  // 渲染后执行
  mounted() {
    let W = document.body.clientWidth / 100; // 获取当前窗口1vw等于多少px
    let C = this.$refs.KL.offsetWidth / 10; // 获取被渲染后的button宽度（px单位）
    this.WIDTH = C / W + this.SIZE; // 将px单位转换成vw单位,并加上一个字符宽度

    var that = this; // 作用域切换

    // 延迟判断用户是否需要使用过度动画
    window.setTimeout(() => {
      that.EXCESS =
        that.xExcess == false
          ? "ExcessCloseE318AEBFD7BF207A"
          : "ExcessOpenE318AEBFD7BF207A";

      that.BugLog(); // 顺手调用以下日志输出
    });
  },

  methods: {
    // 鼠标悬停时触发
    Enter() {
      if (this.COLORS.indexOf(this.xColor) > -1) {
        // 用户使用了预设颜色
        this.COLORA = this.xColor + "E318AEBFD7BF207A";
      } else if (this.TERM.test(this.xColor)) {
        // 用户定制了颜色
        this.COLORA = "";
        this.COLORL = this.xColor;
      } else {
        // 用户什么也没做
        this.COLORA = "BlueE318AEBFD7BF207A";
      }
    },

    // 鼠标离开时触发
    Leave() {
      this.COLORL = "";
      this.COLORA = "BaseE318AEBFD7BF207A";
    },

    // 处理按钮的点击事件
    Click() {
      this.BugLogEasy("点击");
      this.$emit("Click", this.xMsg);
    },

    // 事件触发
    BugLogEasy(E) {
      if (
        this.xDeBug == true ||
        window.sessionStorage.getItem("OpenDebug") == "true"
      ) {
        console.group(
          `按钮${E}事件${
            this.xDeBugId != undefined ? "（ID:" + this.xDeBugId + ")" : ""
          }`
        );

        console.log(`用户参数：${this.xMsg ? "\n" + this.xMsg : "无"}`);

        console.groupEnd();
      }
    },

    // 汇报bug
    BugLog() {
      if (
        this.xDeBug == true ||
        window.sessionStorage.getItem("OpenDebug") == "true"
      ) {
        console.group(
          `来自按钮的日志：${
            this.xDeBugId != undefined ? "（ID:" + this.xDeBugId + ")" : ""
          }`
        );

        console.table([
          { Name: "xText", Value: this.xText, Remark: "按钮内显示的文字" },
          {
            Name: "xColor",
            Value: this.xColor,
            Remark: "鼠标悬浮时文字和边的颜色"
          },
          {
            Name: "xSize",
            Value:
              this.xSize == undefined ? "默认值（0.65vw）" : this.xSize + "vw",
            Remark: "按钮内文字大小"
          },
          {
            Name: "xDisable",
            Value: this.xDisable == false ? "禁用" : "启用",
            Remark: "是否禁用按钮"
          },
          {
            Name: "xRadius",
            Value: this.xRadius == false ? "禁用" : "启用",
            Remark: "是否使用圆角"
          },
          {
            Name: "xExcess",
            Value: this.xExcess == false ? "禁用" : "启用",
            Remark: "xExcess"
          }
        ]);

        console.log(`用户参数：${this.xMsg ? "\n" + this.xMsg : "无"}`);

        console.groupEnd();
      }
    }
  }
};
</script>

<template>
  <div
    class="BasisE318AEBFD7BF207A"
    :class="[{RadiusE318AEBFD7BF207A:xRadius!=false},COLORA,EXCESS]"
    :style="{fontSize:SIZE+'vw',height:SIZE*2+'vw',width:WIDTH+'vw',borderColor:COLORL}"
    @mouseenter="Enter"
    @mouseleave="Leave"
    @click="Click"
  >
    <button
      class="EnlargeE318AEBFD7BF207A"
      :class="[COLORA,EXCESS]"
      :style="{fontSize:SIZE*10+'vw',color:COLORL}"
      ref="KL"
    >{{TEXT}}</button>
  </div>
</template>

<style scoped>
.BasisE318AEBFD7BF207A {
  /* 按钮的基础样式 */
  background-color: #ffffff;
  display: inline-block;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  line-height: 1;
}

.ExcessOpenE318AEBFD7BF207A {
  transition: all 0.5s ease !important;
}

.ExcessCloseE318AEBFD7BF207A {
  transition: none !important;
}

.RadiusE318AEBFD7BF207A {
  border-radius: 0.2vw;
}

.EnlargeE318AEBFD7BF207A {
  /* 强行把按钮内文字部分缩小10倍 */
  transform: translate(-50%, -50%) scale(0.1);
  top: 50%;
  left: 50%;
  float: left;
  border: none;
  line-height: 1;
  position: relative;
  white-space: nowrap;
  background-color: transparent;
}

.BaseE318AEBFD7BF207A {
  border-color: #aaaaaa;
  color: #888888;
}

.BlueE318AEBFD7BF207A {
  border-color: #409eff;
  color: #409eff;
}

.RedE318AEBFD7BF207A {
  border-color: #ff3e3e;
  color: #ff3e3e;
}

.GreenE318AEBFD7BF207A {
  border-color: #00d812;
  color: #00d812;
}

.YellowE318AEBFD7BF207A {
  border-color: #eeff00;
  color: #eeff00;
}

.OrangeE318AEBFD7BF207A {
  border-color: #ffa600;
  color: #ffa600;
}

.BlackE318AEBFD7BF207A {
  border-color: #333333;
  color: #333333;
}

.PinkE318AEBFD7BF207A {
  border-color: #f7a3ff;
  color: #f7a3ff;
}
</style>